<template>

<div class="page">
  <!--  #ifdef  H5 -->
  <video v-if="userInfo.live_status == 1" id="myVideo" class="video" object-fit="cover" :controls="false"
         :autoplay="true" :show-center-play-btn="false" :enable-progress-gesture="false"
         :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>
  <video v-if="userInfo.live_status == -1" id="myVideo" class="video" object-fit="cover" :controls="false"
         :autoplay="true" :show-center-play-btn="true" :enable-progress-gesture="false" :src="pullUrl"
         :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>
  <!--  #endif -->

  <!--  #ifdef  MP-WEIXIN -->
  <video v-if="userInfo.live_status == -1" id="myVideo" class="video" :src="pullUrl" object-fit="cover"
         :controls="false" :autoplay="true" :show-center-play-btn="false" :enable-progress-gesture="false"
         :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>

  <live-player v-if="userInfo.live_status == 1" id="livePlayer" class="livePlayer" mode="live"
               :picture-in-picture-mode="pictureInPictureMode" :src="pullUrl" :autoplay="false" @statechange="statechange"
               @error="error" :style="{width:windowWidth+'px',height:windowHeight+'px'}" object-fit="fillCrop"
               min-cache="1" max-cache="20"/>
  <!--  #endif -->
  <div class="playerPanel">

    <div class="head w-flex"
         @click="$u.route({url:'pagesC/shop/storeDetails',params:{shop_id:userInfo.shop_id}})">
      <div class="avatarwrap" @click="toShop(userInfo.shop_id)">
        <image class="avatar" :src="userInfo.shop_logo"></image>
        <div class="info" @click="toShop(userInfo.shop_id)">
          <p class="shopname">{{ userInfo.shop_name }}</p>
          <p class="seenum">在线人数{{ userInfo.online_num1 + 1 }}</p>
        </div>
        <span class="attentionBtn" @click="changeAtten">{{ userInfo.is_follow === 1 ? '已关注' : '关注' }}
          </span>
      </div>

    </div>
    <div class="identification">
      <span class="left">房间ID：{{ userInfo.room }}</span>
      <span class="rightID"></span>
    </div>
    <div class="topRightWrap" @click="onClose">
      <image class="topRightWrapClose" src="/static/images/live/close.png"></image>
    </div>

    <!-- 礼物滚动消息 -->
    <giveGift :giveGiftList="giveGiftList"></giveGift>

    <scroll-view class="liveSayWrap" scroll-y="true"
                 scroll-with-animation="true"
                 :scroll-top="scrollTop"
                 :scroll-into-view="scrollIntoView"
                 @scroll="liveScroll"
                 @scrolltolower="scrolltolower"
    >
      <div class="tipwrap">
        {{ userInfo.system_notice }}
      </div>
      <div v-for="(item, index) in msgList" :key="index" class="item">
        <div :id="'msg-' + index" class="item-item" :class="[item.username ? 'tip-scroller__msg--active' : '']">
          <text class="tip-scroller__tag tip-scroller__member" v-if="item.member_rank">
            {{ item.member_rank || '无' }}
          </text>
          <text class="tip-scroller__tag" v-if="item.username">{{ item.username ? item.rank : '' }}</text>
          <p class="username">
              <span style="font-size: 16px;" @click="liveRoomMonitoring(item)">
                {{ item.username ? item.username + '：' : '' }}</span>
          </p>
          <text class="" style="font-size: 16px;" v-for="(text, i) in item.msg" :key="i"> {{ text }}</text>
        </div>
        <div></div>
      </div>
    </scroll-view>
    <!-- <floatWindow :goodsDetails="liveGoodsList[2] || {}" ></floatWindow> -->
    <div class="footerWrap w-flex">
      <div class="w-flex">
        <div class="goodsImgWrap">
          <image class="goods" src="/static/images/live/icon-liveBaby.png" @click="letGoodsShow"></image>
          <span class="num" v-if="liveGoodsList.length">
              {{ liveGoodsList.length ? liveGoodsList.length : '' }}
            </span>
        </div>
        <input type="text" v-model="inputValue" confirm-type="send" @confirm="send" maxlength="20"
               class="sayInput" name="input" placeholder="聊点什么吧~" placeholder-class="sayInputP"/>
      </div>
      <div class="w-flex">

        <button class="shareButton" :plain="true" open-type="share" @click="sharePopUp()">
          <u-image width="60" height="60" src="/static/images/icon-share.png">
          </u-image>
        </button>
        <div>
          <image class="appraise u-m-r-20 " @click="showGift"
                 :src="imgStaticUrl+'/images/gift-btn.png'"></image>
        </div>
        <div>
          <image class="appraise " @click="praiseAction"
                 src="/static/images/praiseIcon/icon-appraise.png"></image>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品属性选择组件 -->
  <u-popup mode="bottom" ref="goodsAttrPopUp" border-radius="16">
    <goodsAttar :propObj="goodsInfo" :GoodsAttrs="goodsInfo.radioattr"></goodsAttar>
  </u-popup>

  <!--  #ifndef  MP-WEIXIN -->
  <u-popup mode="bottom" ref="sharePopUp" class="shareWrap" border-radius="16">
    <div class="wrap">
      <div class="shareItem" @click="copyShareLink">
        <image class="shareIconWrap" mode="widthFix" src="/static/images/share/icon-copyLink.png"></image>
        <p class="shareTit">复制链接</p>
      </div>
    </div>
  </u-popup>
  <!--  #endif -->

  <u-popup mode="center" v-model="isBannedPanelShow" width="80%" border-radius="8">
    <div class="u-flex u-col-center avatarBox">
      <u-avatar :src="currUserInfo.headimgurl"></u-avatar>
      <p class="avatarBoxName">确认<span style="color:#f44336">{{ banradio }}</span> 用户:{{
          currUserInfo.username
        }}
      </p>
    </div>
    <div class="bannerdAction">
      <u-form-item>
        <u-radio-group v-model="banradio">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
                   :disabled="item.disabled">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-button type="success" @click="banConfirm">确定</u-button>
    </div>
  </u-popup>

  <!--  直播间商品列表组件-->
  <liveGoodsList ref="liveGoodsPopup" :goodsList="liveGoodsList" :room="userInfo.room"/>
  <!-- 礼物列表 -->
  <uni-popup class="gift-popup" ref="giftPopup" :safeArea="false" type="bottom"
             mask-background-color="rgba(0, 0, 0, 0.1)">
    <gift :giftList="giftList" :goldCoin="userGoldCoin" @giveGift="giveGift"></gift>
  </uni-popup>

  <div class="-warp">
    <image class="like-image" :class="[item.active ? 'like-active' : '']"
           src="/static/images/live/icon-liveBaby.png" v-for="(item, index) in likeList" :key="index"></image>
  </div>
  <div class="praise_bubble">
    <div v-for="(item, index) in appraiseList" :key="index" class="bubble" :class="[item.srcB,item.animaB]"
         :data-t="item.time">
    </div>
  </div>
  <u-toast ref="uToast"/>


  <view class="liansong_donghua_box" v-if="show">
    <tanGoods :name="data.name" :song_name="data.text" ref="RboyLiansong" @onStop="onStop3"></tanGoods>
  </view>


</div>
</template>

<script>
import goodsAttar from './components/goodsAttar';
import liveGoodsList from "./components/liveGoodsList";
import shareJS from "@/utils/share.js";
import floatWindow from './components/floatWindow';
// import gift from '@/pagesC/live/components/gift';
// import giveGift from '@/pagesC/live/components/giveGift';
import gift from './components/gift';
import giveGift from './components/giveGift';
import tanGoods from './components/tanGoods';
//  #ifdef  H5
// flvjs如何使用:
import flvjs from 'flv.js'
// #endif

let client_id;
let token;
let messagePool = [];
// 弹幕信息最多20条
let maxMessageCount = 20;
// 每次去弹幕池取出的条数
let maxMessageFrameCount = 5;
let setpraiseAction = null;
let onlineTimer = null;
let offScan = true;
import {
  APPNAME,
  LIVESOCKET
} from '../config/index';

export default {
  mixins: [shareJS],
  data() {
    return {
      imgStaticUrl: '',
      background: {
        backgroundColor: 'rgba(28, 187, 180,0)'
      },
      pullUrl: '',
      appName: '',
      context: null,
      shopid: '',
      likeList: [],
      windowWidth: uni.getSystemInfoSync().screenWidth,
      windowHeight: uni.getSystemInfoSync().screenHeight,
      userInfo: {},
      liveGoodsList: [],
      liveCustomerList: [],
      commentsList: [],
      currLikeIndex: -1,
      inputValue: '',
      token: '',
      msgList: [],
      userAvatarList: [],
      isShowAction: true,
      currUserInfo: {},
      goodsInfo: {},
      offsetTop: 0,
      appraiseList: [],
      isBannedPanelShow: false, //是否显示   直播间管理面板
      banradio: '拉黑',
      radioList: [{
        name: '拉黑',
        disabled: false
      },
        {
          name: '禁言',
          disabled: false
        }
      ],
      pictureInPictureMode: ['pop', 'push'],
      scrollTop: 0,
      scrollIntoView: '',
      giftList: [],
      giveGiftList: [],
      userGoldCoin: 0,
      data: [],
      show: false,
    }
  },

  components: {
    goodsAttar,
    liveGoodsList,
    gift,
    giveGift,
    floatWindow,
    tanGoods
  },
  onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮

    }
    return {
      title: '哆嗯商城',
      path: `/platforms/live-player?shop_id=${this.shopid}`
    }
  },
  // watch: {
  //     msgList(val) {
  //         if (val.length > 50) {
  //             this.$nextTick(() => {
  //                 this.msgList.splice(0, 1);
  //             });
  //         }
  //     }
  // },

  onReady() {
    setInterval(() => {
      this.giftAutoHide();
    }, 2000)
  },

  async onLoad(option) {
    this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
    this.getGiftList()
    token = uni.getStorageSync('token')
    if (!token) {
      uni.showModal({
        title: "提示",
        content: "当前暂未登录,无法观看直播",
        confirmText: "登录",
        success: function (res) {
          if (res.confirm) {
            // #ifdef MP-WEIXIN
            uni.switchTab({
              url: '/pages/tabBar/my'
            });
            // #endif
            // #ifdef H5
            uni.navigateTo({
              url: '/pagesB/login/login'
            });
            // #endif
            return false;
          } else if (res.cancel) {
            uni.navigateBack()
          }
        }
      });

    }

    this.appName = APPNAME
    offScan = true;
    this.$loading('加载中')
    client_id = uni.getStorageSync('client_id')
    this.shopid = await option.shop_id //获取店铺id
    this.shareLink = uni.getStorageSync('baseUrl') + 'h5/#/platforms/live-player?shop_id=' + option.shop_id
    this.token = await uni.getStorageSync('token') // 获取用户token
    await this.getLiveinformation() //根据店铺id获取店铺详情信息
    this.getLiveGoodsList() //根据店铺id获取直播间商品列表
    onlineTimer = setInterval(() => {
      console.log('获取直播人数')
      this.timerGetOnlineMemberCount();
    }, 10000)
    // #ifdef MP-WEIXIN
    uni.setKeepScreenOn({
      keepScreenOn: true
    })
    this.context = uni.createLivePlayerContext("livePlayer", this)
    try {
      console.log('play s')
      await this.context.play()
      console.log('play e')
    } catch (e) {
      console.log('play err',e)
    }
    uni.hideLoading();
    // #endif

    //  点赞轮询动画  在页面hook:beforeDestroy时销毁
    setpraiseAction = setInterval(() => {
      this.praiseAction()
    }, 500)
    // this.$on('hook:beforeDestroy', () => {
    //     clearInterval(setpraiseAction);
    //     clearInterval(onlineTimer);
    //     uni.closeSocket();
    //     console.log('beforeDestroy run');
    //
    // })
    this.$hideLoading()


  },
  beforeDestroy() {
    offScan = false;
    clearInterval(setpraiseAction);
    clearInterval(onlineTimer);
    uni.closeSocket();
  },

  methods: {
    loopMessagePool() {
      if (!offScan) return;
      console.log('扫描弹幕池')
      if (messagePool.length > 0) {
        let messages = messagePool.splice(0, maxMessageFrameCount);
        console.log('messages', messages);
        this.msgList = [...this.msgList, ...messages];
        this.$nextTick(() => {
          setTimeout(() => {
            this.go2bottom();
            if (this.msgList.length > 30) {
              this.msgList.splice(0, maxMessageFrameCount);
            }
          }, 50);
        });
        console.log(messagePool);
      }
      setTimeout(() => {
        this.loopMessagePool();
      }, 1000);
    },
    // loopMessagePool() {
    //     console.log('扫描弹幕池1')
    //     if (messagePool.length > 0) {
    //         let message = messagePool.shift();
    //         this.msgList.push(message);
    //         this.$nextTick(() => {
    //             this.go2bottom();
    //             setTimeout(() => {
    //                 this.go2bottom();
    //                 if (this.msgList.length > 30) {
    //                     this.msgList.splice(0, maxMessageFrameCount);
    //                 }
    //             }, 50);
    //         });
    //         console.log(messagePool);
    //     }
    //     setTimeout(() => {
    //         this.loopMessagePool();
    //     }, 300);
    // },
    giftAutoHide() {
      if (this.giveGiftList.length) {
        setTimeout(() => {
          this.giveGiftList.splice(0, 1)
        }, 2000)
      }
    },
    showGift() {
      this.$refs.giftPopup.open('bottom')
    },
    // 直播间礼物列表
    getGiftList() {
      this.$http.getLiveGiftList().then(res => {
        this.giftList = res.data
      })
    },
    giveGift(info) {
      if (this.userGoldCoin < info.gift_coin) {
        uni.showToast({
          title: '您的金币不足',
          duration: 2000,
          icon: 'none'
        });
        return;
      }
      if (this.userInfo.user_id == this.userInfo.anchor_id) {
        uni.showToast({
          title: '自己不能给自己直播间赠送礼物',
          duration: 2000,
          icon: 'none'
        });
        return;
      }

      uni.sendSocketMessage({
        data: JSON.stringify({
          type: 'givegift',
          msgtype: 'text',
          id: token,
          room: this.userInfo.room,
          client_id: this.client_id,
          shop_id: this.shopid,
          gift_id: info.gift_id
        })
      });

    },
    praiseAction() {

      const randomA = Math.floor(Math.random() * 6) + 1;
      const randomB = Math.floor(Math.random() * 11) + 1; // bl1~bl11
      const time = new Date().getTime()

      const srcB = `b${randomA}`;
      const animaB = `bl${randomB}`;
      let data = {
        srcB,
        animaB,
        time
      }
      this.appraiseList.push(data)
      let index = this.appraiseList.length
      if (index > 20) {
        this.appraiseList.splice(10, index - 1)
      }
    },

    send() {
      if (!this.inputValue) {
        uni.showToast({
          title: '发言不能为空',
          duration: 2000,
          icon: 'none'
        });
        return false;
      }
      let d = {
        type: 'livesay',
        msgtype: 'text',
        id: this.token,
        room: this.userInfo.room,
        msg: this.inputValue,
        client_id
      };
      this.$http.recordLiveSendMessageLog(d);

      uni.sendSocketMessage({
        data: JSON.stringify(d)
      });

      this.inputValue = ''
    },

    getLiveRoomServiceList() {
      let data = {
        shop_id: this.shopid
      }
      this.$http.getLiveRoomServiceList(data).then(res => {
        if (res.status === 200) {
          this.customerList = res.data.data;
        }
      })
    },
    timerGetOnlineMemberCount() {
      let data = {
        shop_id: this.shopid
      }
      this.$http.getLiveinformation(data).then(Res => {
        if (Res.status === 200) {
          this.userInfo = Res.data;
        }
      })
    },
    getLiveinformation() {
      let data = {
        shop_id: this.shopid
      }
      this.$http.getLiveinformation(data).then(Res => {
        if (Res.status === 200) {
          this.userInfo = Res.data;
          this.pullUrl = Res.data.addressitem
          this.userGoldCoin = Res.data.gold_coin;
          this.initWebSokcet(Res.data.room)
          this.loopMessagePool();
          //  #ifdef H5
          if (this.userInfo.live_status == 1) {
            setTimeout(() => {
              this.openPlayer(Res.data.addressitem)
            }, 500)

          }
          // #endif

        }
      })
    },
    openPlayer(url) {
      const checkObj = new Map([
        [flvjs.isSupported && url,],
      ])
      if (flvjs.isSupported && url) {
        const videoEle = document.getElementsByClassName("uni-video-video")[0]
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url,
        });
        flvPlayer.attachMediaElement(videoEle);
        flvPlayer.load();
        flvPlayer.play();
      } else {
        this.$toast('暂无直播或直播回放')
      }
    },
    statechange(e) {
      console.log('live-player code:', e)
    },
    error(e) {
      console.log('错误了：', e)
    },

    getGoodsInfo(item) {
      this.$refs.PopUp.close()
      console.log("详情")
      let data = {
        goods_id: item.id,
        fangshi: 1,
        type: "live",
      }
      this.$http.getGoodsInfo(data).then(res => {
        if (res.status === 200) {
          this.goodsInfo = res.data || {}

          this.$refs.goodsAttrPopUp.open()
        }
      })
    },
    previewCommentImg(imgs, index) {
      // 预览图片
      uni.previewImage({
        urls: imgs,
        current: index,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '关注'],
          success: function (data) {

          },
          fail: function (err) {

          }
        }
      });
    },
    liveScroll(e) {

    },
    scrolltolower(e) {
      this.offsetTop = e.currentTarget.offsetTop
    },
    letCustomerShow() {
      this.$refs.customerPopUp.open()
    },
    liveRoomMonitoring(data) {
      // this.currUserInfo = data;
      // this.isBannedPanelShow = true;
      // return;
      if (data.block_type !== 0) return;
      const role = uni.getStorageSync('role') || ''; //管理员角色身份
      const list = ['shop', 'service'] //商家和客服身份有拉黑 禁言等直播间管理权限
      if (!list.includes(role)) return;
      if (data.username && data.role === 'user') {
        this.currUserInfo = data;
        this.isBannedPanelShow = true;
      }
    },
    openBuyerPop() {
      this.$refs.buyerPopUp.open()
    },
    go2bottom() {
      const indicatorId = 'msg-' + (this.msgList.length - 1);
      this.scrollIntoView = indicatorId
    },
    sharePopUp() {
      // #ifdef MP-WEIXIN
      return false
      // #endif
      this.$refs.sharePopUp.open()
    },

    // 获取直播间商品列表信息
    letGoodsShow() {
      this.getLiveGoodsList(() => {
        this.$refs.liveGoodsPopup.goodsPopShow = true
      });
    },
    getLiveGoodsList(cb) {
      let data = {
        page: 1,
        shop_id: this.shopid
      }
      this.$http.getLiveGoodsList(data).then(Res => {
        if (Res.status === 200) {
          this.liveGoodsList = Res.data.data;
          cb && cb();
        }

      })
    },
    initWebSokcet(room) {
      uni.onSocketOpen(res => {
        // console.log('直播间WebSocket连接已打开！');
        uni.sendSocketMessage(
            JSON.stringify({
              type: 'ping',
              id: this.token
            })
        );

      });
      /*
       *   直播间首次建立socket:   发送{data} 简历直播间websocket链接
       *   bindlive_id：  直播间绑定id
       *   token：         用户token
       *   room：          房间号，由直播间详情页接口生成 （this.$http.getLiveinformation）
       *   client_id:      客户端标示
       * */
      uni.sendSocketMessage({
        data: JSON.stringify({
          type: 'bindlive_id',
          id: this.token,
          room: room,
          client_id
        })
      });
      uni.onSocketMessage(res => {
        let data = {};
        try {
          data = JSON.parse(res.data)

        } catch (e) {
          console.log('eee', e);
        }
        if (data.type === 'livesay') {
          messagePool.push(data.data);
        }

        if (data.type === 'buygoods') {
          if (this.show) {
            this.$refs.RboyLiansong.set_liansong()
          } else {
            this.show = true
          }
          this.data = data.list;
        }

        if (data.type === 'givegiftlist') {
          this.giveGiftList.push(data.data);
          this.$nextTick(() => {
            setTimeout(() => {
              this.go2bottomGift();
            }, 50);
          });
          this.getLiveinformation() //根据店铺id获取店铺详情信息
        }

        if (data.type === 'notice') {
          this.msgList.push({
            msg: data.msg
          });
          this.userAvatarList.unshift(data.data.headimgurl);
          this.$nextTick(() => {
            setTimeout(() => {
              this.go2bottom();
            }, 50);
          });
        }

      })


    },

    // 动画结束
    onStop3() {
      this.show = false
    },

    go2bottomGift() {
      const indicatorId = 'gift-msg-' + (this.msgList.length - 1);
      // this.scrollIntoView = indicatorId
    },
    async banConfirm() {
      // 单场禁言：type:2         永久禁言(拉黑)：type:3
      const map = new Map([
        ['禁言', {
          name: '禁言',
          type: 2
        }],
        ['拉黑', {
          name: '拉黑',
          type: 3
        }],
      ])
      const audience = this.currUserInfo
      const mapGet = map.get(this.banradio)
      await uni.sendSocketMessage({
        data: JSON.stringify({
          type: 'blockUser',
          id: this.token,
          shopid: this.shopid,
          userid: audience.user_id,
          room: this.userInfo.room,
          blockType: mapGet.type
        })
      })
      this.isBannedPanelShow = false
      this.$refs.uToast.show({
        title: `${audience.username}已被${mapGet.name}`,
        type: 'success',
      })
    },


    linkTo(url) {
      uni.navigateTo({
        url,
        animationType: 'pop-in'
      });
    },
    // 跳到商品详情页
    toGoodsDetali(goodsid) {
      uni.navigateTo({
        url: '/pagesC/goods/goodsDetails?id=' + goodsid,
        animationType: 'slide-in-right',
        animationDuration: 300
      });
    },
    changeAtten() {
      if (this.userInfo.is_follow === 0) {
        this.getshopcoll()
      } else {
        this.getshopcancelcoll()
      }
    },
    getshopcoll() {
      this.$http.getshopcoll({
        shop_id: this.shopid
      }).then(res => {
        if (res.status === 200) {
          this.$toast(res.mess)
        }
      })
    },
    getshopcancelcoll() {
      this.$http.getshopcancelcoll({
        shop_id: this.shopid
      }).then(res => {
        if (res.status === 200) {
          this.$toast(res.mess)
        }
      })
    },

    toShop(shop_id) {
      uni.navigateTo({
        url: '/pagesC/shop/storeDetails?shop_id=' + this.shopid,
        animationType: 'slide-in-right',
        animationDuration: 300
      });
    },
    onClose() {
      uni.navigateBack({
        delta: 1
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~uview-ui/index.scss';

.page {
  color: #fff;
  overflow: hidden;
  background-color: #000;
}

.playerPanel {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  left: 0;
  right: 0;
  font-size: 28rpx;
  /*  #ifdef  H5 */
  padding-top: 80rpx;

  /*  #endif  */
  .head {
    padding: 5rpx 18rpx;
    /*  #ifdef  MP-WEIXIN */
    margin-top: 80rpx;
    /*  #endif */

    .avatarwrap {
      display: inline-flex;
      align-items: center;
      background: rgba(#fff, 0.2);
      padding: 4rpx 10rpx;
      border-radius: 400rpx;

      .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 500rpx;
      }

      .info {
        margin-left: 10rpx;
        width: 170rpx;

        .shopname {
          font-size: 28rpx;
          line-height: 1.3;
          font-weight: 800;
          //color: #f1f1f1;
          color: black;
        }

        .seenum {
          font-size: 24rpx;
          font-weight: normal;
          //color: #eee;
          color: black;
        }
      }
    }

    .attentionBtn {
      background: linear-gradient(45deg, #fa3f3f, #fb8c43);
      border-radius: 100rpx;
      padding: 0 18rpx;
      font-size: 24rpx;
      margin-left: 10rpx;
      text-align: center;
      line-height: 55rpx;
      height: 55rpx;
      font-weight: 800;
    }

    .shopHead {
      border: 2rpx solid #fff;
      text-align: center;
      margin: 0 40rpx;
      border-radius: 10rpx;

      p {
        font-size: 24rpx;
        line-height: 1.4;
      }

      p:first-child {
        background: #fff;
        color: salmon;
        padding: 0 8rpx;
      }

    }

  }
}

.topRightWrap {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #fff;
  border-radius: 200rpx;
  opacity: 0.5;
  position: fixed;
  width: 60rpx;
  height: 60rpx;
  right: 30rpx;
  top: 180rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topRightWrapClose {
  width: 40rpx;
  height: 40rpx;
  border-radius: 40rpx;
}

.footerWrap {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  right: 0;
  padding: 0 20rpx;
  justify-content: space-between;
  background-color: rgba(#000, 0);

  .goods {
    width: 70rpx;
    height: 80rpx;
  }

  .goodsImgWrap {
    position: relative;

    .num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -30%);
      color: #fff;
      font-weight: 800;
    }
  }

  .sayInput {
    width: 320rpx;
    background: rgba(#fff, 0.4);
    padding: 15rpx 30rpx;
    border-radius: 400rpx;
    margin-left: 19rpx;
    color: black;
  }

  /deep/ .sayInputP {
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;
  }

  .appraise {
    width: 60rpx;
    height: 60rpx;
  }
}

.shareBtn {
  width: 56rpx;

}

.reportBtn {
  height: 48rpx;
  border-radius: 500rpx;
  display: inline-block;
  text-align: center;
  line-height: 48rpx;
  margin: 10rpx;
  padding: 8rpx 20rpx;
  opacity: 0.7;
}

.w-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shareWrap {
  /*  #ifndef MP-WEIXIN  */
  padding: 0 25rpx;

  /*  #endif  */
  .wrap {
    display: flex;
    justify-content: space-around;

    .shareItem {
      text-align: center;
      padding: 10rpx;
      color: #333;

      image {
        width: 90rpx;
      }
    }
  }

}

/deep/ .uni-popup__wrapper-box {
  border-top-right-radius: 18rpx;
  border-top-left-radius: 18rpx;

}

.liveSayWrap {
  position: fixed;
  bottom: 150rpx;
  left: 20rpx;
  width: 500rpx;
  overflow: hidden;
  height: 380rpx;
  font-size: 24rpx;
}

.tipwrap {
  @extend .item;
  color: #ff8534;
  border-radius: 8rpx !important;
}

.tagimg {
  width: 50rpx;
  margin: 8rpx 8rpx 0;
}

view {
  font-size: 24rpx;
}

.item {
  background-color: rgba(black, 0.2);
  padding: 0rpx 10rpx;
  border-radius: 100rpx;
  font-size: 24rpx;
  margin-bottom: 10rpx;

  &-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

.username {
  color: #ff8534
}

.tip-scroller__tag {
  margin-right: 6rpx;
  margin-top: 4rpx;
  padding: 0 6rpx;
  font-size: 22rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  color: #fff;
  border-radius: 10rpx;
  background-image: linear-gradient(to right, #ff6f0f, #fa3e3f);
}

.tip-scroller__member {
  background-image: linear-gradient(to right, #ff9900, #ffaf37);
}

.customer {
  display: flex;
  color: #333;
  position: relative;
  margin-top: 25rpx;

  .avatar {
    width: 90rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }

  .username {
    font-size: 30rpx;
  }

  .tip {
    color: #999;
    font-size: 24rpx;
  }

  .status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24rpx;

    .dot {
      width: 14rpx;
      height: 14rpx;
      border-radius: 100px;
      background: #2ccc40;
      display: inline-block;
      margin-right: 10rpx;
    }
  }
}

.commentBox {
  display: flex;

  p {
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #929292;
    background: rgba(#fff, 0.3);
    padding: 0 16rpx;
    border-radius: 200px;
    line-height: 1.5;
  }
}

.buyerWrap {
  .buyer {
    color: #333;
    margin-bottom: 25rpx;
    border-bottom: 2rpx dashed #f5f5f5;
    padding-bottom: 20rpx;

    .avatar {
      width: 90rpx;
      flex-shrink: 0;
    }

    .info {
      flex: 1;
      margin-left: 20rpx;
    }

    .time {
      font-size: 24rpx;
      color: #999;
    }

    .describe {
      margin: 20rpx;

      .quto {
        color: #999;
        font-size: 30rpx;

      }
    }

    .imgwrap {
      display: flex;
      margin-left: 20rpx;

      image {
        width: 100rpx;
      }
    }
  }
}

.appraisenum {
  position: fixed;
  bottom: 120rpx;
  right: 40rpx;
  color: #ffa468
}

//点赞动画

$bubble_time: 3s;
$bubble_scale: 0.8s;

.praise_bubble {
  width: 100px;
  height: 200px;
  position: fixed;
  right: 0;
  bottom: 130rpx;
}

.bubble {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50px;
  bottom: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  transform-origin: bottom;
}

.b1 {
  background-image: url('@/static/images/praiseIcon/bg1.png');
  // 可以使用雪碧图
  // background-position: -42px -107px;
  // background-size: 188.5px 147px;
}

.b2 {
  background-image: url('@/static/images/praiseIcon/bg2.png');
  // background-position: -84px -107px;
  // background-size: 188.5px 147px;
}

.b3 {
  background-image: url('@/static/images/praiseIcon/bg3.png');
  // background-position: 0 -107px;
  // background-size: 188.5px 147px;
}

.b4 {
  background-image: url('@/static/images/praiseIcon/bg4.png');
  // background-position: -45px -62px;
  // background-size: 188.5px 147px;
}

.b5 {
  background-image: url('@/static/images/praiseIcon/bg5.png');
  // background-position: -107px -42px;
  // background-size: 188.5px 147px;
}

.b6 {
  background-image: url('@/static/images/praiseIcon/bg6.png');
  // background-position: -107px 0;
  // background-size: 188.5px 147px;
}

.bl1 {
  animation: bubble_1 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl2 {
  animation: bubble_2 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl3 {
  animation: bubble_3 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl4 {
  animation: bubble_4 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl5 {
  animation: bubble_5 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl6 {
  animation: bubble_6 $bubble_time linear 1 forwards,
  bubble_big_3 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl7 {
  animation: bubble_7 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl8 {
  animation: bubble_8 $bubble_time linear 1 forwards,
  bubble_big_3 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl9 {
  animation: bubble_9 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl10 {
  animation: bubble_10 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl11 {
  animation: bubble_11 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

@keyframes bubble_11 {
  0% {
  }

  25% {
    margin-left: -10px;
  }

  50% {
    margin-left: -10px;
  }

  100% {
    margin-left: -18px;
  }
}

@keyframes bubble_10 {
  0% {
  }

  25% {
    margin-left: -20px;
  }

  50% {
    margin-left: -20px;
  }

  100% {
    margin-left: -20px;
  }
}

@keyframes bubble_9 {
  0% {
  }

  25% {
    margin-left: 10px;
  }

  50% {
    margin-left: 10px;
  }

  100% {
    margin-left: 10px;
  }
}

@keyframes bubble_8 {
  0% {
  }

  25% {
    margin-left: 20px;
  }

  50% {
    margin-left: 20px;
  }

  100% {
    margin-left: 20px;
  }
}

@keyframes bubble_7 {
  0% {
  }

  25% {
    margin-left: 3px;
  }

  50% {
    margin-left: 1px;
  }

  75% {
    margin-left: 2px;
  }

  100% {
    margin-left: 3px;
  }
}

@keyframes bubble_6 {
  0% {
  }

  25% {
    margin-left: -3px;
  }

  50% {
    margin-left: -1px;
  }

  75% {
    margin-left: -2px;
  }

  100% {
    margin-left: -3px;
  }
}

@keyframes bubble_5 {
  0% {
  }

  25% {
    margin-left: 5px;
  }

  50% {
    margin-left: -5px;
  }

  75% {
    margin-left: -10px;
  }

  100% {
    margin-left: -20px;
  }
}

@keyframes bubble_4 {
  0% {
  }

  25% {
    margin-left: -5px;
  }

  50% {
    margin-left: -5px;
  }

  75% {
    margin-left: 20px;
  }

  100% {
    margin-left: 10px;
  }
}

@keyframes bubble_3 {
  0% {
  }

  25% {
    margin-left: -20px;
  }

  50% {
    margin-left: 10px;
  }

  75% {
    margin-left: 20px;
  }

  100% {
    margin-left: -10px;
  }
}

@keyframes bubble_2 {
  0% {
  }

  25% {
    margin-left: 20px;
  }

  50% {
    margin-left: 25px;
  }

  75% {
    margin-left: 10px;
  }

  100% {
    margin-left: 5px;
  }
}

@keyframes bubble_1 {
  0% {
  }

  25% {
    margin-left: -8px;
  }

  50% {
    margin-left: 8px;
  }

  75% {
    margin-left: -15px;
  }

  100% {
    margin-left: 15px;
  }
}

@keyframes bubble_big_1 {
  0% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes bubble_big_2 {
  0% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(0.9);
  }
}

@keyframes bubble_big_3 {
  0% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(0.6);
  }
}

@keyframes bubble_y {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0;
  }

  75% {
    opacity: 1;
  }

  100% {
    margin-bottom: 200px;
    opacity: 0;
  }
}

.video {
  // z-index: -1;
}

.identification {
  font-size: 20rpx;
  overflow: hidden;
  margin: 10rpx 20rpx;
  display: inline-flex;

  .left {
    background: rgba(#fff, 0.6);
    border-radius: 8rpx;
    color: #333;
    padding: 0 12rpx;
    display: inline-block;
    font-weight: 800;
  }

  .rightID {
    margin-left: 12rpx;
  }
}

.u-line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-m-r-30 {
  margin-right: 30rpx;
}

.shareButton {
  background-color: transparent;
  border: none;
}

.bannerdAction {
  padding: 30rpx;

}

.avatarBox {
  flex-direction: column;
  padding: 30rpx 0 0;

  .avatarBoxName {
    color: #333;
    font-size: 28rpx;
  }
}

.gift-popup {
  height: 700px;
  border: 6px solid red;
  overflow: hidden;
  background-color: #161822;
}

.liansong_donghua_box {
  position: fixed;
  left: 0;
  top: 300rpx;
  width: 750rpx;
  height: 150rpx;
}
</style>
